<h3>Messages</h3>

<p>
    This page demonstrates how you can use the <code>Message</code> service in your application.
    This service is automatically hooked to <code>$http</code> and <code>$sailsSocket</code> errors.
</p>

<div class="row">
    <div class="col-md-4">
        <h5 class="col-md-offset-3">Message trigger from form data</h5>
        <form name="customMessage" class="form-horizontal" role="form">
            <div class="form-group">
                <label for="title" class="col-md-3 control-label">Title</label>
                <div class="col-md-9">
                    <input id="title" name="title" type="text" class="form-control" placeholder="Enter title" required="required"
                        data-ng-model="title"
                    />
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="col-md-3 control-label">Message</label>
                <div class="col-md-9">
                    <textarea id="message" name="message" class="form-control"
                        data-ng-model="message"
                    ></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="type" class="col-md-3 control-label">Type</label>
                <div class="col-md-9">
                    <select id="type" name="type"  class="form-control" required="required"
                        data-ng-model="type"
                        data-ng-options="messageType as messageType for messageType in messageTypes"
                    ></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <button class="btn btn-primary"
                        data-ng-disabled="!customMessage.$valid"
                        data-ng-click="showMessage()"
                    >Show message</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-4">
        <h5>Automatic message trigger via <code>$http</code></h5>

        <div class="form-group">
            <button class="btn btn-primary"
                data-ng-click="makeInvalidHttpRequest(0)"
            >Invalid URL</button>

            <button class="btn btn-primary"
                data-ng-click="makeInvalidHttpRequest(1)"
            >Record not found</button>
        </div>

        <h5>Automatic message trigger via <code>$sailsSocket</code></h5>

        <div class="form-group">
            <button class="btn btn-primary"
                data-ng-click="makeInvalidSailsSocketRequest(0)"
            >Invalid URL</button>

            <button class="btn btn-primary"
                data-ng-click="makeInvalidSailsSocketRequest(1)"
            >Record not found</button>
        </div>
    </div>
</div>

